<template>
	<h1>{{menuItem ? "修改菜单" : "添加菜单"}}</h1>
	<el-form ref="myForm" :model="formData" :rules="rules">
		<el-form-item label="上级菜单" prop="menuSuperior">

			<el-tree-select v-model="formData.menuSuperior" :data="menuoptions" check-strictly show-checkbox
				:render-after-expand="false" :default-checked-keys="checkedArr" :props="propData" node-key="menuId" />
		</el-form-item>
		{{formData.menuSuperior}}

		<el-form-item label="菜单名称" prop="menuName">
			<el-input placeholder="请输入菜单名称" v-model="formData.menuName"></el-input>
		</el-form-item>
		<el-form-item label="菜单类型" prop="menuType">
			<el-radio-group v-model="formData.menuType">
				<el-radio value="1" size="large">菜单</el-radio>
				<el-radio value="2" size="large">按钮</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="菜单路径" prop="menuPath">
			<el-input placeholder="请输入菜单路径" v-model="formData.menuPath"></el-input>
		</el-form-item>
		<el-form-item label="菜单图片">
			<el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
				:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
				<img v-if="imageUrl" :src="imageUrl" class="avatar" />
				<el-icon v-else class="avatar-uploader-icon">
					<Plus />
				</el-icon>
			</el-upload>
		</el-form-item>
		<el-form-item label="是否启用" prop="menuStatus">
			<el-radio-group v-model="formData.menuStatus">
				<el-radio value="0" size="large">是</el-radio>
				<el-radio value="1" size="large">否</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="save(myForm)">保存</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from "vue"
	import {
		ElMessage,
		ElForm,
		ElFormItem,
		ElSelect,
		ElOption,
		ElInput,
		ElRadio,
		ElRadioGroup,
		ElButton,
		ElTreeSelect,
		ElUpload,
		ElIcon
	} from "element-plus";
	import {
		insertMenu,
		getAllMenuList,
		getMenuList,
		updateMenu
	} from "@/api"
	import {
		useRoute,
		useRouter
	} from "vue-router";
	import {
		Plus
	} from '@element-plus/icons-vue'
	import {
		uploadUrl,
		baseUrl
	} from "@/utils/request";

	let route = useRoute();
	let router = useRouter()
	let menuItem = sessionStorage.getItem("itemMenu")
	let formData = reactive({
		menuName: "",
		menuSuperior: "",
		menuType: "1",
		menuPath: "",
		menuStatus: "0",
		menuImage: "", //菜单图片
	})
	let checkedArr = ref([]) //默认选中的
	let propData = reactive({
		label: "menuName",
		children: "childs"
	})
	if (menuItem) {
		Object.assign(formData, JSON.parse(menuItem))
	}
	let menuoptions = ref([]);
	let rules = reactive({
		menuName: [{
			required: true,
			message: '请输入菜单名称',
			trigger: 'blur'
		}, ],
		menuSuperior: [{
			required: true,
			message: '请选择上级菜单',
			trigger: 'blur'
		}, ],
		menuType: [{
			required: true,
			message: '请选择菜单类型',
			trigger: 'blur'
		}, ],
		menuPath: [{
			required: true,
			message: '请输入菜单路径',
			trigger: 'blur'
		}, ],
		menuImage: [{
			required: false,
			message: '请选择菜单图标',
			trigger: 'blur'
		}, ],
		menuStatus: [{
			required: true,
			message: '请选择菜单是否启用',
			trigger: 'blur'
		}, ],
	})
	let myForm = ref(null)
	const save = async () => {
		if (menuItem) {
			//修改
			formData.menuId = JSON.parse(menuItem).menuId
			let res = await updateMenu(formData)
			ElMessage({
				message: "修改成功",
				type: 'success',
			})
			// router.go(-1)
		} else {
			//添加
			let res = await insertMenu(formData)
			// router.go(-1)
		}
	}
	//图片上传
	const imageUrl = ref('')

	const handleAvatarSuccess = (response, uploadFile) => {
		// console.log('上传成功', response)
		imageUrl.value = URL.createObjectURL(uploadFile.raw)
		//imageUrl.value=baseUrl+"manager/"+response.data
		formData.menuImage = response.data
	}

	const beforeAvatarUpload = (rawFile) => {
		// console.log(rawFile)
		let reg = /(jpg|png|jpeg)$/
		if (!reg.test(rawFile.type)) {
			ElMessage.error('图片只能是jpg/jpeg/png格式的')
			return false
		} else if (rawFile.size / 1024 / 1024 > 4) {
			ElMessage.error('图片的大小不能超过4MB')
			return false
		}
		return true
	}

	onMounted(async (formEl) => {
		//获取所有菜单，展示在下拉菜单中;
		let res = await getAllMenuList({
			roleId: Number(sessionStorage.getItem("roleId"))
		})
		menuoptions.value = res
		if (menuItem) {
			//如果是修改功能，回显
			checkedArr.value = [JSON.parse(menuItem).menuSuperior]

		}
	})
</script>

<style scoped>
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
</style>